<template>
    <div id="My-Bottom-Img">
        <div id="My-Bottom-Content">
            <div id="My-BotImg-title">
                <img src="img/My/My-1-2.png" alt="">
                <h2>视频</h2>
            </div>
            <div id="My-BotImg-Box">
                <div  class="My-BotImg-text" >
                    <div class="top">
                        <img src="img/My/My-2-1.png" alt="">
                        <h2>赢10万创作奖金，院士面对面!</h2>
                    </div>
                    <div class="bottom">
                        <p>
                            <span>6.3万</span>视频·
                            <span>2.5亿</span>播放
                        </p>
                        <span class="block">拍视频</span>
                    </div>
                </div>
                <div  class="My-BotImg-text" >
                    <div class="top">
                        <img src="img/My/My-2-1.png" alt="">
                        <h2>赢10万创作奖金，院士面对面!</h2>
                    </div>
                    <div class="bottom">
                        <p>
                            <span>6.3万</span>视频·
                            <span>2.5亿</span>播放
                        </p>
                        <span class="block">拍视频</span>
                    </div>
                </div>
                <div  class="My-BotImg-text" >
                    <div class="top">
                        <img src="img/My/My-2-1.png" alt="">
                        <h2>赢10万创作奖金，院士面对面!</h2>
                    </div>
                    <div class="bottom">
                        <p>
                            <span>6.3万</span>视频·
                            <span>2.5亿</span>播放
                        </p>
                        <span class="block">拍视频</span>
                    </div>
                </div>
                <div  class="My-BotImg-text" >
                    <div class="top">
                        <img src="img/My/My-2-1.png" alt="">
                        <h2>赢10万创作奖金，院士面对面!</h2>
                    </div>
                    <div class="bottom">
                        <p>
                            <span>6.3万</span>视频·
                            <span>2.5亿</span>播放
                        </p>
                        <span class="block">拍视频</span>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "question"
    }
</script>

<style lang="scss" scoped>
    #My-Bottom-Img {
        background-color: #ffffff;
        margin-bottom: 0.08rem;

        #My-Bottom-Content {
            /*padding: 0.16rem 0.15rem 0.15rem 0.15rem;*/
        }
    }

    #My-BotImg-title{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        padding: 0.16rem 0.15rem 0 0.15rem;

        img{
            width: 0.2rem;
            vertical-align: middle;
        }

        h2{
            margin-left: 0.04rem;
            font-size: 0.14rem;
            color: #202020;
        }
    }

    #My-BotImg-Box::-webkit-scrollbar{
        display: none;
    }
    #My-BotImg-Box{
        margin-top: 0.2rem;
        padding-bottom: 0.15rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;

        /*隐藏滚动条开始*/
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overflow-y: hidden;
        overflow: -moz-scrollbars-none;
        overflow: -moz-scrollbars-none;
        /*隐藏滚动条结束*/

        .My-BotImg-text{
            width: 2.92rem;
            /*height: 1.04rem;*/
            position: relative;
            margin: 0 0.15rem 0 0.15rem;

            .top{
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                img{
                    width: 0.5rem;
                }
                h2{
                    font-size: 0.17rem;
                    color: #090909;
                    margin-left: 0.07rem;
                    padding-right: 0.25rem;
                }
            }

            .bottom{
                margin-top: 0.24rem;

                p{
                    font-size: 0.14rem;
                    color: #7e7e7e;
                    line-height: 0.28rem;
                }

                .block{
                    width: 0.74rem;
                    height:0.28rem;
                    display: block;
                    background-color: #e5f3ff;
                    color:#0077f7;
                    font-size: 0.14rem;
                    text-align: center;
                    line-height: 0.28rem;
                    position: absolute;
                    right: 0;
                    bottom:0;
                }
            }
        }

        .My-BotImg-text:nth-last-child(1){
            padding-right: 0.56rem;
        }

    }

</style>